<template>
  <div>
    <h2>BABA有存款: {{money}}</h2>
    <button @click="handler">找小明借钱100</button><br>
    <button @click="handler1">找小红借钱150</button><br>
    <button @click="handler2">找所有孩子借钱200</button><br>
    
    <br>
    <Son ref="son"/>

    <br>
    <Daughter ref="dau" />
  </div>
</template>

<script>
import Son from './Son'
import Daughter from './Daughter'

export default {
  name: 'ChildrenParentTest',
  data () {
    return {
      money: 1000
    }
  },

  methods: {
     //找儿子借钱
     handler(){
       //父组件的数据加上100元
       this.money+=100;
       //父组件当中获取子组件！！！！
       //可以通过ref获取子组件！！！
       this.$refs.son.money-=100;

     },
     //找女儿节点
     handler1(){
       //父组件自身
        this.money+=150;
        //女儿组件减去150
        this.$refs.dau.money-=150;
     },
     //找全部子女借钱
     handler2(){
       this.money+=400;
       //遍历数组里面的全部子组件
       //组件实例$children属性，可以获取某一个父组件的全部的子组件
       //很少使用下角标使用子组件----不确定到底是那个子组件！！！
       this.$children.forEach(item=>{
            item.money-=200;
       });
     }
  },

  components: {
    Son,
    Daughter
  }
}
</script>

<style>

</style>
